(function (window, undefined) {

console.log('执行datashow')
}(window));

function huanhang(val) {
    var length = val.length;
    str = val.substring(0, Math.ceil(length / 2)) + "\n" + val.substring(Math.ceil(length / 2), length);
    return str
}
function request_data(id, uuid, label) {
    var res_data = "";
    $.ajax({
        url: '/node_side_nodes',
        type: 'POST',
        async: false,
        data: {"id": id, "uuid": uuid, "label": label},
        success: function (data) {
            res_data = data;
        },
        error: function (response) {

        }
    });
    return res_data
}

function atlas(nodes, edges,idName) {


            var myChart = echarts.init(document.getElementById(idName));

            var types = {};
            var categoryi = 0;
            var label = '';
            nodes.forEach(function (node) {
                if (!types.hasOwnProperty(node.label)) {
                    types[node.label] = categoryi;
                    categoryi++;
                }
                node.category = types[node.label];
            });
            var categories = [];
            var length = Object.keys(types).length;
            for (var type in types) {
                categories.push({name: type})
            }
            option = {

                // 提示框的配置
                tooltip: {
                    //triggerOn: 'click',
                    formatter: function (x) {
                        var htmlStr = '';
                        if (x.data.uuid !== undefined) {
                            console.log('aaa');
                            htmlStr += 'id : ' + x.data.id + '<br/>';
                            htmlStr += 'uuid : ' + x.data.uuid + '<br/>';
                            htmlStr += 'label : ' + x.data.label + '<br/>';
                            for (var k in x.data.properties) {
                                htmlStr += k + ' : ' + x.data.properties[k] + '<br/>';
                            }
                        } else {
                            for (k in x.data) {
                                htmlStr += k + ' : ' + x.data[k] + '<br/>';
                            }
                        }


                        return htmlStr;
                    }
                },
                // 工具箱
                toolbox: {
                    // 显示工具箱
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        // 还原
                        restore: {
                            show: true,
                        },
                        // 保存为图片
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: [{
                    data: categories.map(function (a) {
                        return a.name;
                    }),
                    selected: {
                        //'类目1': false,
                        //'类目0': false,
                    }
                }],
                animationDuration: 1500,
                animationEasingUpdate: 'quinticInOut',

                series: [{
                    name: 'Les Miserables',
                    type: 'graph', // 类型:关系图
                    layout: 'force', //图的布局，类型为力导图
                    symbolSize: 70, // 调整节点的大小
                    roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [1, 10],
                    focusNodeAdjacency: true,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    },
                    edgeLabel: {
                        normal: {
                            show: true,
                            formatter: function (x) {
                                return x.data.type;
                            },
                            textStyle: {
                                fontSize: '10rem'
                            }
                        }
                    },
                    force: {
                        initLayout: 'circular',
                        repulsion: [800, 2000], //斥力
                        edgeLength: [80, 120],
                        layoutAnimation: true
                    },
                    draggable: true,
                    lineStyle: {
                        normal: {
                            show: true,
                            width: 1,
                            color: 'source',  //决定边的颜色起点、终点、颜色代码
                            curveness: 0 //边的曲度，支持从 0 到 1 的值，值越大曲度越大。
                        }
                    },
                    label: {  //文本标签
                        normal: {
                            show: true,//显示
                            position: 'inside',//相对于节点标签的位置，默认在节点中间
                            color: '#ffffff',
                            //回调函数，你期望节点标签上显示什么
                            formatter: function (x) {
                                var temStr = ''
                                if (x.data.properties.name !== undefined)
                                    temStr = huanhang(x.data.properties.name);
                                else if (x.data.properties.title !== undefined)
                                    temStr = huanhang(x.data.properties.title);
                                else
                                    temStr = huanhang(x.data.label);
                                if(temStr.length>3) {
                                    temStr = temStr.substring(0,4) +'...'
                                }
                                return temStr
                            },
                            textStyle: {
                                fontSize: 13
                            }
                        }
                    },

                    // 数据
                    data: nodes,
                    edges: edges,
                    categories: categories,

                }]
            };
            myChart.setOption(option, true);
            // 双击事件，最终目的
            myChart.on('dblclick', function (params) { //双击事件
                    if (params.dataType === "node") {
                        //根据params.data.id或其它唯一标识符请求节点相关数据，拿到数据push到option.series[0].data和option.series[0].links
                        res_data = request_data(params.data.id, params.data.uuid, params.data.label);
                        var a = res_data.data.nodes;
                        var b = res_data.data.edges;
                        // 节点查重
                        for (i = 0; i < a.length; i++) {
                            for (var j = 0; j < nodes.length; j++) {
                                var repeat = false;
                                if (a[i].id === nodes[j].id) {
                                    repeat = true;
                                    break;
                                }
                            }
                            if (!repeat) {
                                if (!types.hasOwnProperty(a[i].label)) {
                                    types[a[i].label] = categoryi;
                                    categories.push({name: a[i].label});
                                    option.legend[0].data.push(a[i].label);
                                    categoryi++;
                                }
                                a[i].category = types[a[i].label];
                                nodes.push(a[i]);
                            }
                        }
                        // 边查重
                        for (i = 0; i < b.length; i++) {
                            for (j = 0; j < edges.length; j++) {
                                repeat = false;
                                if (a[i].id === edges[j].id) {
                                    repeat = true;
                                    break;
                                }
                            }
                            if (!repeat) {
                                edges.push(b[i]);
                            }
                        }
                        myChart.setOption(option, true);
                        console.log('legend.data', option.legend[0].data);
                    }
                }
            );//双击事件


            document.oncontextmenu = function () {
                return false;
            }; //隐藏鼠标右击事件
            myChart.on('contextmenu', function (params) {//鼠标右击事件事件
                showMenu(params, [
                    {
                        "name": "隐藏节点",
                        "fn": function () {
                            for (i = 0; i < nodes.length; i++) {
                                if (nodes[i].uuid === params.data.uuid) {
                                    nodes.splice(i, 1);
                                }
                                myChart.setOption(option);
                            }
                        }
                    }
                ]);
            });//鼠标右击事件

            var style_ul = "padding:0px;margin:0px;border-radius: 5px;background: rgba(3, 3, 3, 0.6);position: absolute;left: 0px;top: 0px;display: none;";
            var style_li = "list-style:none;padding: 5px 10px;color: #ffff;";
            var style_li_hover = style_li + "background-color: #00A0E9; color: #ffff;border-radius: 5px;";

            //右键菜单容器
            var menubox = $("<div class='echartboxMenu' style='" + style_ul + "'><div style='text-align:center;background:#ccc'></div><ul style='margin:0px;padding:0px;'></ul></div>")
                .appendTo($(document.body));

            //点击其他位置隐藏菜单
            $(document).click(function () {
                menubox.hide()
            });

            //显示隐藏节点菜单
            var showMenu = function (params, menus) {
                $("div", menubox).text(params.name);
                var menulistbox = $("ul", menubox).empty();
                $(menus).each(function (i, item) {
                    var li = $("<li style='" + style_li + "'>" + item.name + "</li>")
                        .mouseenter(function () {
                            $(this).attr("style", style_li_hover);
                        })
                        .mouseleave(function () {
                            $(this).attr("style", style_li);
                        })
                        .click(function () {
                            item["fn"].call(this);
                            menubox.hide();
                        });
                    menulistbox.append(li);
                });
                menubox.css({
                    "left": params.event.event.clientX,
                    "top": params.event.event.clientY
                }).show();
            }
        }

